import { render } from 'vue'
import type { DirectiveBinding } from 'vue'
import { ElImageViewer } from 'element-plus'

const previewImage = {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    const previewBox = document.createElement('div')
    previewBox.classList.add('preview-image')
    let vnode

    el.addEventListener('click', () => {
      vnode = h(ElImageViewer, {
        urlList: binding.value,
        hideOnClickModal: true,
        onClose: () => {
          el.removeEventListener('click', () => {})
          document.body.removeChild(previewBox)
          render(null, previewBox)
        }
      })
      render(vnode, previewBox)
      document.body.appendChild(previewBox)
    })
  }
}
export default previewImage
